<template>
  <div class="app-container">
    <el-card :style="{ borderRadius: '5px' }">
      <div class="filter-container">
        <el-date-picker v-model="createTimeDateVul" format="yyyy-MM-dd " value-format="yyyy-MM-dd" type="daterange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:360px"
          @change="handlecreateTimeDateChange" />
        <el-input v-model="model.orderno" placeholder="请输入订单号" style="width: 200px; margin-left: 10px"
          @keyup.enter.native="handleFilter" />
        <el-select v-model="model.state" style="width: 160px; margin: 0 10px" placeholder="请选择订单状态" clearable>

          <el-option v-for="item in stateList" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
        <el-select v-model="model.toagency" style="width: 160px; margin-right:10px" placeholder="请选择商家状态" clearable>
          <el-option v-for="item in toagencyList" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>

        <el-button v-waves type="primary" style="margin-left: 10px" plain icon="el-icon-search"
          @click="handleFilter">搜索</el-button>
      </div>
    </el-card>
    <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
      <el-table v-loading.body="!listLoading" :header-row-style="{ height: '70px' }" :header-cell-style="{
        color: '',
        fontSize: '',
        backgroundColor: '#dfe6ec',
      }" :data="list" border fit highlight-current-row style="width: 100%" tooltip-effect="dark">
        <el-table-column label="序号" width="50px" align="center" type="index" show-overflow-tooltip />
        <el-table-column label="订单号" prop="orderno" min-width="180px" align="center" show-overflow-tooltip />

        <el-table-column label="标题" min-width="180px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column prop="logo" label="主图" min-width="100px" align="center">
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: center">
              <HzImg :src="row.logo" cssStyle="height: 80px;width: 80px" />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="开始入住日期" prop="sdate" align="center" show-overflow-tooltip />

        <el-table-column label="结束入住日期" prop="edate" align="center" show-overflow-tooltip />
        <el-table-column label="入住人数" prop="persons" align="center" show-overflow-tooltip />
        <el-table-column label="原价" prop="origin_money" align="center" show-overflow-tooltip />
        <el-table-column label="折扣金额" prop="discount_money" align="center" show-overflow-tooltip />
        <el-table-column label="优惠券抵扣" prop="coupon_money" align="center" show-overflow-tooltip />
        <el-table-column label="实际支付" prop="actual_money" align="center" show-overflow-tooltip />
        <el-table-column label="押金" prop="assurances_money" align="center" show-overflow-tooltip />
        <el-table-column label="平台佣金" prop="commision_money" align="center" show-overflow-tooltip />
        <el-table-column label="房源类型" min-width="80px" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.house_type == 1">长租</span>
            <span v-if="row.house_type == 4">民宿</span>
          </template>
        </el-table-column>
        <el-table-column label="中介姓名" prop="agency_name" align="center" show-overflow-tooltip />
        <el-table-column label="中介电话" prop="agency_phone" align="center" show-overflow-tooltip />
        <el-table-column label="联系姓名" prop="name" align="center" show-overflow-tooltip />
        <el-table-column label="联系电话" prop="phone" align="center" show-overflow-tooltip />
        <el-table-column label="订单状态" min-width="80px" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.state == 0">已取消</span>
            <span v-if="row.state == 1">已预订</span>
            <span v-if="row.state == 2">进行中</span>
            <span v-if="row.state == 3">已完成</span>
            <span v-if="row.state == 4">已评价</span>
          </template>
        </el-table-column>
        <el-table-column label="转账状态" min-width="80px" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.toagency == 0">未转账</span>
            <span v-if="row.toagency == 1">已转账</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="240px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="handleDetail(scope.row)">查看房源</el-button>
            <el-button size="mini" type="primary" v-if="scope.row.state == 1" plain
              @click="handleTransfer(1, scope.row)">退款用户</el-button>
            <el-button size="mini" type="danger" v-if="scope.row.toagency == 0" plain
              @click="handleTransfer(2, scope.row)">转账商家</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="listLoading" class="pagination-container">
        <el-pagination :current-page.sync="model.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="9"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <el-dialog :title="type == 1 ? '退款用户' : '转账商家'" :visible.sync="dialogFormVisible" width="800px">
      <div class="userInfo">
        <ul>
          <li>
            用户名：{{ userInfo.name || '--' }}
          </li>
          <li>银行名称：{{ userInfo.bank_name || '--' }}</li>
          <li>账户名：{{ userInfo.account_name || '--' }}</li>
          <li>卡号：{{ userInfo.account_number || '--' }}</li>
        </ul>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click.stop="onSubmit">确 定</el-button>
        </span>
      </div>
    </el-dialog>
    <el-dialog title="查看房源" :visible.sync="dialogFormVisible1" width="800px">
      <el-form ref="dataForm" label-width="120px">
        <el-form-item label="标题:">
          <el-input type="textarea" autosize v-model="commonInfo.title" style="width: 350px" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="主图:">
          <HzImgUpload :urls.sync="commonInfo.logo" :display="true"  />
        </el-form-item>
        <el-form-item label="开始入驻日期">
          <el-input type="input" autosize v-model="commonInfo.sdate" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="结束入驻日期">
          <el-input type="text" autosize v-model="commonInfo.edate" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="入驻人数">
          <el-input type="text" autosize v-model="commonInfo.persons" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="原价">
          <el-input type="text" autosize v-model="commonInfo.origin_money" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="折扣金额">
          <el-input type="text" autosize v-model="commonInfo.discount_money" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="实际支付">
          <el-input type="text" autosize v-model="commonInfo.actual_money" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="押金">
          <el-input type="text" autosize v-model="commonInfo.assurances_money" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="平台佣金" >
          <el-input type="text" autosize v-model="commonInfo.commision_money" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="房源类型">
          <span>{{ commonInfo.house_type==1?'长租': commonInfo.house_type==4?'民宿':''}}</span>
        </el-form-item>
        <el-form-item label="中介姓名">
          <el-input type="text" autosize v-model="commonInfo.agency_name" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="中介电话">
          <el-input type="text" autosize v-model="commonInfo.agency_phone" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="联系姓名">
          <el-input type="text" autosize v-model="commonInfo.name" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input type="text" autosize v-model="commonInfo.phone" style="width: 350px"  />
        </el-form-item>
        <el-form-item label="订单状态">
          <span v-if="commonInfo.state == '0'">待支付</span>
            <span v-if="commonInfo.state == '1'">已支付</span>
            <span v-if="commonInfo.state == '-1'">已超时</span>
            <span v-if="commonInfo.state == '-2'">已退款</span>
        </el-form-item>
        <el-form-item label="转账状态">
          <span v-if="commonInfo.toagency == 0">未转账</span>
          <span v-if="commonInfo.toagency == 1">已转账</span>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancelData('form')">取 消</el-button>
        <el-button v-if="dialogStatus === 'create'" type="primary" plain @click.native.prevent="createData('form')">确
          定</el-button>
        <el-button v-else type="primary" plain @click.native.prevent="updateData('form')">确 定</el-button>
      </div> -->
    </el-dialog>


  </div>
</template>
  
<script>
import HzFileUpload from "@/custom/HzFileUpload";
import HzImgUpload from "@/custom/HzImgUpload";
import HzImg from "@/custom/HzImg";
import HzLink from "@/custom/HzLink";
import waves from "@/directive/waves"; // waves directive
import {
  reserveOrder,
  bankAccount,
  getRefund,
  getTransfer
} from "@/api/system/user";

export default {
  name: "Common",
  directives: {
    waves,
  },
  components: {
    HzFileUpload,
    HzImgUpload,
    HzImg,
    HzLink,
  },
  data() {
    return {
      loading: false,
      name: "",
      list: [],
      total: 0,
      listLoading: false,
      dialogFormVisible: false,
      extra: {}, //额外参数(用于格式化)
      type: 1,
      userInfo: {
        name: "",
        bank_name: "",
        account_name: "",
        account_number: ""
      },
      commonInfo: {},
      dialogFormVisible1: false,
      createTimeDateVul: [],
      model: {
        pageNo: 1,
        pageSize: 10,
      },
      orderid: "", //订单id
      stateList: [
        { name: "待支付", value: 0 },
        { name: "已支付", value: 1 },
        { name: "已超时", value: '-1' },
        { name: "已退款", value: '-2' },
      ],
      toagencyList: [
        { name: "未转账", value: 0 },
        { name: "已转账", value: 1 },
      ],
    };
  },
  created() {
    this.getList();
  },

  mounted() { },
  methods: {
    handlecreateTimeDateChange(v) {
      this.createTimeDateVul = v;
      if (this.createTimeDateVul != null) {
        this.model.sdate = this.createTimeDateVul[0];
        this.model.edate = this.createTimeDateVul[1];
      } else {
        this.model.sdate = "";
        this.model.sdate = "";
      }
      this.model.pageNo = 1;
      this.getList();
    },

    handleSizeChange(val) {
      this.model.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.model.pageNo = val;
      this.getList();
    },
    getList() {
      this.listLoading = false;
      reserveOrder(this.model).then((response) => {
        let data = response.data.records;
        this.list = data;
        this.extra = response.extra;
        this.total = response.data.total;
        this.listLoading = true;
      });
    },
    handleTransfer(type, row) {
      this.type = type;
      this.orderid = row.orderid;
      bankAccount({ userid: row.userid }).then((response) => {
        this.userInfo = response.data || { name: "" };
        if (this.userInfo.name) {
          this.dialogFormVisible = true;
        } else {
          this.$message({
            message: "暂无银行账户信息 无法操作",
            type: "warning",
          });
        }
      });
    },
    handleDetail(row) {
      this.commonInfo = row;
      console.log('commonInfo', this.commonInfo);
      this.dialogFormVisible1 = true;
    },
    onSubmit() {
      if (this.type == 1) {
        getRefund({ orderid: this.orderid }).then((response) => {
          this.$message({
            message: "退款成功",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.model.pageNo = 1;
          this.getList();
        });
      } else {
        getTransfer({ orderid: this.orderid }).then((response) => {
          this.$message({
            message: "转账成功",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.model.pageNo = 1;
          this.getList();
        });
      }
    },
    handleFilter() {
      this.model.pageNo = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.userInfo {
  ul {
    li {
      margin: 10px 0;
      list-style: none;
    }
  }

  .dialog-footer {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
  